<!-- 文章大纲 -->
<script setup lang="ts" name="tagSelector">
import useTagsControl from '@/components/index/hooks/tagsControl'
const {
  InputRef,
  dynamicTags,
  inputValue,
  inputVisible,
  handleClose,
  showInput,
  handleInputConfirm
} = useTagsControl()
</script>

<template>
  <div class="flex gap-2">
    <el-tag
      size="default"
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="default"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag" size="default" @click="showInput"> + </el-button>
  </div>
</template>

<style scoped lang="less">
.flex {
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  width: 100%;
  gap: 10px;
  justify-content: center;
  border-radius: var(--radius);
  background-color: var(--color1);
  box-sizing: border-box;
  > span {
    color: var(--color-font);
  }
}
.el-tag {
  height: 32px;
}
</style>
